<template>
  <div class="main">
    <div class="wrap">
      <div class="rank-title flex-between flex-align-items-center">
        <div class="left flex flex-align-items-center">
          <h1 class="font-20">带货红人排行榜</h1>
          <el-tooltip content="展示Fatohot平台带过货的红人数据排行" placement="top" effect="dark">
            <i class="iconfont icon-changjianwentixiangguanwenti2 pointer"></i>
          </el-tooltip>
        </div>
        <div class="right flex flex-align-items-center">
          <i class="iconfont icon-dianzan_kuai"></i>
          <p class="font-14">每周一更新，更新时间：2024年01月08日</p>
        </div>
      </div>
      <form-search :list="searchList" :info="form" column="4" @confirm="searchConfirm"></form-search>
      <div class="flex">
        <div class="rank-list">
          <h3 class="rank-header font-16">带货数量</h3>
          <div class="rank-body">
            <div v-for="(item, index) in list" :key="item.id" class="item flex-between flex-align-items-center">
              <div class="flex flex-align-items-center">
                <p class="item-index font-16-B">{{ index + 1 }}</p>
                <div>
                  <p class="item-name font-14">{{ item.name }}</p>
                  <div class="item-tags flex">
                    <p class="font-12">{{ item.country }}</p>
                    <p class="font-12">{{ item.tag }}</p>
                  </div>
                </div>
              </div>
              <div class="flex flex-align-items-center">
                <div class="item-value font-16-B">{{ item.count }}个</div>
                <p class="item-collect flex-center flex-align-items-center pointer" :class="{ active: item.collect }">
                  <i class="iconfont icon-guanzhu-weiguanzhu"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="rank-list">
          <h3 class="rank-header font-16">互动率</h3>
          <div class="rank-body">
            <div v-for="(item, index) in list" :key="item.id" class="item flex-between flex-align-items-center">
              <div class="flex flex-align-items-center">
                <p class="item-index font-16-B">{{ index + 1 }}</p>
                <div>
                  <p class="item-name font-14">{{ item.name }}</p>
                  <div class="item-tags flex">
                    <p class="font-12">{{ item.country }}</p>
                    <p class="font-12">{{ item.tag }}</p>
                  </div>
                </div>
              </div>
              <div class="flex flex-align-items-center">
                <div class="item-value font-16-B">{{ item.count }}</div>
                <p class="item-collect flex-center flex-align-items-center pointer" :class="{ active: item.collect }">
                  <i class="iconfont icon-guanzhu-weiguanzhu"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="rank-list">
          <h3 class="rank-header font-16">平均播放量</h3>
          <div class="rank-body">
            <div v-for="(item, index) in list" :key="item.id" class="item flex-between flex-align-items-center">
              <div class="flex flex-align-items-center">
                <p class="item-index font-16-B">{{ index + 1 }}</p>
                <div>
                  <p class="item-name font-14">{{ item.name }}</p>
                  <div class="item-tags flex">
                    <p class="font-12">{{ item.country }}</p>
                    <p class="font-12">{{ item.tag }}</p>
                  </div>
                </div>
              </div>
              <div class="flex flex-align-items-center">
                <div class="item-value font-16-B">{{ numConvert(item.count, 2) }}</div>
                <p class="item-collect flex-center flex-align-items-center pointer" :class="{ active: item.collect }">
                  <i class="iconfont icon-guanzhu-weiguanzhu"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import FormSearch from '../../components/formSearch.vue';
import { ref } from 'vue';
import numConvert from '@/js/numConvert.js';

const searchList = ref([
  {
    label: '筛选平台',
    type: 'select',
    key: 'name',
    options: [
      {
        label: 'YouTube',
        value: 1
      }
    ]
  },
  {
    label: '国家筛选',
    type: 'select',
    key: 'text',
    options: [
      {
        label: '中国',
        value: 1
      },
      {
        label: '美国',
        value: 2
      }
    ]
  },
  {
    label: '红人分类',
    type: 'select',
    key: 'taskName',
    options: [
      {
        label: '科技',
        value: 1
      },
      {
        label: '运动',
        value: 2
      }
    ]
  },
  {
    label: '带货类型',
    type: 'select',
    key: 'asterisk',
    options: [
      {
        label: '星标邮件',
        value: 1
      },
      {
        label: '所有邮件',
        value: 2
      }
    ]
  },
  {
    label: '粉丝数',
    type: 'select',
    key: 'count',
    options: [
      {
        label: '<1万',
        value: 1
      },
      {
        label: '1万-5万',
        value: 2
      },
      {
        label: '5万-10万',
        value: 3
      },
      {
        label: '10万-20万',
        value: 4
      },
      {
        label: '20万-30万',
        value: 5
      },
      {
        label: '30万-40万',
        value: 6
      },
      {
        label: '40万-50万',
        value: 7
      },
      {
        label: '>50万',
        value: 8
      }
    ]
  }
]);
const form = ref({});
const list = ref([
  {
    id: 1,
    name: 'xxxx',
    tag: '科技',
    country: '中国',
    count: 123,
    collect: true
  },
  {
    id: 2,
    name: 'xxxx',
    tag: '科技',
    country: '中国',
    count: 123
  }
]);

const searchConfirm = e => {
  form.value = {
    ...e
  }
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;

  .wrap {
    min-height: calc(100% - 78px);
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04);

    &::v-deep {
      .search {
        padding: 0;
        margin-bottom: 8px;
        border-bottom: 1px solid #f2f3f5;
        box-shadow: none;
      }
    }
  }
}

.rank-title {
  margin-bottom: 16px;

  .left {
    h1 {
      color: #333;
      margin-right: 8px;
    }

    i {
      color: #333;
    }
  }

  .right {
    i {
      color: #666;
      margin-right: 8px;
    }

    p {
      color: #666;
    }
  }
}

.rank-list {
  flex: 1;

  &:last-child {
    .rank-body {
      border: none;
    }
  }

  .rank-header {
    color: #333;
    padding-left: 24px;
    margin-bottom: 24px;
  }

  .rank-body {
    border-right: 1px solid #f5f5f5;

    .item {
      height: 68px;
      margin-bottom: 12px;
      padding: 10px 24px;

      .item-index {
        width: 20px;
        color: #333;
        line-height: 22px;
        margin-right: 24px;
      }

      .item-name {
        color: rgba(51, 51, 51, .85);
        margin-bottom: 4px;
      }

      .item-tags {
        p {
          min-width: 56px;
          height: 24px;
          padding: 0 8px;
          background: hsla(210, 6%, 87%, .1);
          border: 1px solid #dcdee0;
          border-radius: 2px;
          color: #999;
          text-align: center;
          line-height: 22px;
          margin-right: 8px;

          &:last-child {
            margin-right: 8px;
          }
        }
      }

      .item-value {
        color: #333;
        margin-right: 24px;
      }

      .item-collect {
        width: 24px;
        height: 24px;
        border-radius: 50%;

        &.active {
          background: @main-color;

          i {
            color: #fff;
          }
        }

        i {
          color: #9f9f9f;
        }
      }
    }
  }
}
</style>
